<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>详情</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .form-control {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div id="box">
        <input type="text" class="form-control" placeholder="请输入名称" v-model="oneData.name">
        <input type="text" class="form-control" placeholder="请输入年龄" v-model="oneData.age">
        <input type="text" class="form-control" placeholder="请输入电话" v-model="oneData.phone">
        <input type="text" class="form-control" placeholder="请输入地址" v-model="oneData.address">
        <button type="button" class="btn btn-success" @click="into">修改</button>
    </div>
    
    <script src="./lib/jquery/jquery-3.2.1.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./lib/vue/vue.min.js"></script>
    <script type="text/javascript">
        var crm = {
            data: {
                oneData: {},
                urlObj: {}
            },
            init: function () {
                this.onload();
                this.bindEvent();
            },
            onload: function () {
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:7070/onelist',
                    dataType: 'json',
                    data: {
                        id: crm.data.urlObj.id
                    },
                    success: function (res) {
                        var [list] = res.result.data;
                        crm.data.oneData = list;
                    }
                })
            },
            bindEvent: function () {

            }
        }
        var vm = new Vue({
            el: '#box',
            data: crm.data,
            methods: {
                into(){
                    console.log(crm.data.oneData);
                    var onedata = JSON.stringify(crm.data.oneData);
                    $.ajax({
                        type: 'post',
                        url:'http://localhost:7070/changelist',
                        dataType: 'json',
                        data: onedata,
                        success:function(res){
                            window.location.assign('./indexCopy.html');
                        }
                    })
                    
                }
            },
            created:function(){
                String.prototype.queryUrlParameter = function () {
                    var obj = {};
                    reg = /([^?=&#]+)=([^?=&#]+)/g;
                    this.replace(reg, function () {
                        var key = arguments[1],
                            value = arguments[2];
                        obj[key] = value;
                    });
                    return obj;
                }
                var urlObj = window.location.href.queryUrlParameter();
                crm.data.urlObj = urlObj;
            },
            mounted: function () {
                crm.init();
            }
        })
    </script>
</body>

</html>